<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
const list = ref([
  {
    label: '订单金额',
    desc: '你还是地方撒的撒的发生萨地方撒萨地方',
  },
  {
    label: '索赔金额',
    desc: '你还是地方撒的撒的发生萨地方撒萨地方',
  },
  {
    label: '订单号',
    desc: '111111',
  },
  {
    label: '订单时间',
    desc: '2022-01-01 00:00:00',
  },
  {
    label: '订单状态',
    desc: '待处理',
  },
  {
    label: '订单类型',
    desc: '普通订单',
  },
  {
    label: '赔偿金额',
    desc: '100.00000000000000000000',
  },
  {
    label: '投保金额',
    desc: '100000000.xxxxxxxxxxxxxxxxxxxx',
  },
])
</script>

<template>
  <div class="test">
    <div class="label-item" v-for="item in list" :key="item.label">
      <div class="label">{{ item.label }}</div>
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="item.desc"
        placement="top-start"
        :disabled="item.desc.length < 10">
        <div class="desc">{{ item.desc }}</div>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
// .test {
//   padding: 24px;
//   width: 80%;
//   display: flex;
//   flex-wrap: wrap;
//   .label-item {
//     display: flex;
//     margin-right: 10px;
//     margin-bottom: 10px;
//     .label {
//       width: 80px;
//       // display: flex;
//       // justify-content: flex-end;
//       // margin-right: 5px;
//     }
//     .desc {
//       width: 130px;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       white-space: nowrap;
//     }
//   }
// }

// 改成grid布局
.test {
  padding: 24px;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px); // 自动填充，每项宽度220px
  grid-gap: 10px; // 设置网格间距

  .label-item {
    display: flex;
    .label {
      width: 80px;
      display: flex;
      // margin-right: 5px;
    }
    .desc {
      width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
